<template>
	<view>
		<!-- <view class="uni-padding-wrap uni-common-mt">
		 	<uni-segmented-control :current="current" :values="items" :style-type="styleType"
		 		:active-color="activeColor" @clickItem="onClickItem" />
		 </view> -->
		<!-- <view title="" type="line" padding>
		      <uni-breadcrumb separator=">">
		        <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
		          {{route.name}}
		        </uni-breadcrumb-item>
		      </uni-breadcrumb>
		    </view> -->

		<!-- 
		<view class="page-section swiper">
			<view>
				<swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
					:indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval"
					:duration="duration" style="width:100%;height:200rpx">
					<swiper-item>
						<view>
							<image style="width:100%;height:200rpx" src="../../../asset/chengshi.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view>
							<image style="width:100%;height:200rpx" src="../../../asset/sucai.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view>
							<image style="width:100%;height:200rpx" src="../../../asset/yuyue.jpg" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view> -->


		<view class="content">
			<uni-section class="a-i-c" title="预约记录信息" type="line">
			</uni-section>
			<!-- 显示设备信息 -->
			<view v-for="(item, index) in tableData" :key="index">
				<uni-card @click="review(item.id)" :title="item.instrumentName">
					
					<view class="interval">

						<text class="card-text-name">姓名:{{item.name}}</text>
						<text class="card-text">学号/工号:{{item.studentId}}</text>
					</view>
					<view class="interval">
						<text class="card-text-name">设备类型：{{type(item.equipmentType)}}</text>
						<!-- <text class="card-text">审核时间：{{item.teacherTime}}</text> -->
					</view>
					
					<view class="interval">
						<!-- <view class="check-mark" ><text
								style="vertical-align: center; color: aliceblue;"><span class="msg-tag spal">{{index+1}}</span></text>
						</view> -->
					
						<text class="card-text">预约时间:{{item.appointmentStart}}～{{item.appointmentEnd}}</text>
					</view>
					<!-- <view class="check-mark">
							<text class="msg-tag wait">类型：{{item.equipmentType}}</text>
						</view> -->
					<!-- <view>
						<div>
							<!-- <uni-icons type="search" size="20" @click="review(item.id);showDrawer('showRight')"
								style="float: right;"></uni-icons> -->
					<!-- 	<view class="uni-group">
						<button class="uni-button" size="mini" type="default"
							@click="review(item.id);showDrawer('showRight')">查看</button> -->
					<!-- 	<button class="uni-button" size="mini" type="warn">删除</button> -->

					<!-- 	<uni-icons type="closeempty" size="20" @click="handleDelete(item.id)" style="float: right;">
								</uni-icons> -->
					<!-- </div> -->


					<!-- 	<button class="uni-button" size="mini" type="default"
							@click="handleDelete(item.id)">删除</button> -->
					<!-- 	<button class="uni-button" size="mini" type="warn">删除</button> -->

					<view class="check-mark">
						<text class="inx">序号.{{indexMethod(index)}}</text>
						<text class="ins" v-if="item.auditStatus==1 && item.note1==0"
							style="color: darkgreen; vertical-align: middle; "><span class="msg-tag span">审核通过</span></text>

						<text class="ins" v-if="item.auditStatus==0 && item.note1==0"
							style=" color: aqua;vertical-align: middle;"><span class="msg-tag spam">待审核</span></text>

						<text class="ins" v-if="item.auditStatus==2 && item.note1==0"
							style="vertical-align: center; color: red;"><span class="msg-tag spab">审核未通过</span></text>

						<text class="ins" v-if="item.note1==1"
							style="vertical-align: center; color: red;"><span class="msg-tag spak">预约取消</span></text>
					</view>

				</uni-card>


			</view>
			<!-- <pagination
			      v-show="total>0"
			      :total="total"
			      :page.sync="queryParams.pageNum"
			      :limit.sync="queryParams.pageSize"
			      @pagination="getList"
			    /> -->
				<view class="uni-pagination-box" v-if="tableData.length!=0">
					<!-- 分页 -->
						<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
							v-model="pageCurrent" @change="change1" />
					</view>
					<view style="height: 20px;"></view>
					
			<view class="uni-pagination-box">
				<view  v-if="tableData.length==0">
					<uni-table style="margin-top: 20px;"  ref="table" :loading="loading" emptyText="暂无更多数据" ></uni-table>
				</view>
			</view>
			
		</view>
		<!-- <uni-section title="右侧滑出" type="line"> -->
		<view class="example-body">
			<!-- <button type="primary" @click="showDrawer('showRight');review(item.id);"><text
						class="word-btn-white">显示Drawer</text>
				</button> -->
			<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')"
				:width="350">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<uni-icons @click="closeDrawer('showRight')" type="back" size="25" style="float: left;">
						</uni-icons>
						<view class="title-split">
							<view></view>
							<text>预约人员信息</text>
							<view></view>
						</view>
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								起止日期 : {{form.appointmentStart}}至{{form.appointmentEnd}}
							</view>
						</view>

						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								姓名: {{form.name}}
							</view>
						</view>
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								学号: {{form.studentId}}
							</view>
						</view>
						<!-- <view class="info-content" ref="form" :model="form">
							<view class='vv'>
								<h5>性别 : {{form.gender}}</h5>
							</view>
						</view> -->
						<!-- <view class="info-content" ref="form" :model="form">
							<view class='vv'>
								<h5>预约状态: {{form.auditStatus}}</h5>
								</view>
						</view> -->
						<!-- <view class="name" v-show="item.auditStatus==3?true:false"><text
								style="vertical-align: center; color: red;"><span class="msg-tag spak">预约取消</span></text></view> -->
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								指导教师 : {{form.teacherName}}
							</view>
						</view>
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								仪器编号 : {{form.instrumentId}}
							</view>
						</view>
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								仪器名称 : {{form.instrumentName}}
							</view>
						</view>
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								领用单位 : {{form.applicationDepartment}}
							</view>
						</view>

						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								首次使用 : {{form.firstUse}}
							</view>
						</view>

						<!-- 	<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								<h5>电话 : {{form.phone}}</h5>
							</view>
						</view> -->

						<!-- 	<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								<h5>部门ID : {{form.deptId}}</h5>
							</view>
						</view> -->
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								地点 : {{form.storageLocation}}
							</view>
						</view>
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								领用人 : {{form.receiverName}}
							</view>
						</view>

						<!-- </view>
						<!-- <view class="info-content" ref="form" :model="form">
							<view class='vv'>
								<h5>教师审核结果 : {{form.teacherResult}}</h5>
								</view> -->
						<!-- </view>
						<view class="info-content" ref="form" :model="form">
							<view class='vv'>
								<h5>领用人审核结果 : {{form.adminResult}}</h5>
									</view> -->


						<view class="content">
							<!-- <uni-icons  @click="closeDrawer('showRight')" type="back" size="25" style="float: left;"></uni-icons>
 -->
							<!-- <button @click="closeDrawer('showRight')" class="mini-btn" type="default" size="mini" style="float: left;">返回</button> -->
							<!-- <button @click="closeDrawer('showRight')"><text class="word-btn-white">返回</text></button> -->
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<uni-icons @click="dialogToggle('success')" type="closeempty" size="25"
								style="float: right;"></uni-icons>
							<!-- 弹出层 -->
							<uni-popup ref="alertDialog" type="dialog">
								<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" content="确定取消预约?"
									@confirm="dialogConfirm" @close="dialogClose">
								</uni-popup-dialog>
							</uni-popup>
							<!-- 提示信息弹窗 -->
							<uni-popup ref="message" type="message">
								<uni-popup-message :type="msgType" :message="messageText" :duration="2000">
								</uni-popup-message>
							</uni-popup>
							<!-- <button @click="submit(1)" class="mini-btm" type="warn" size="mini"style="float: right;">取消预约</button> -->
							<!-- <button @click="submit(1)"><text class="word-btn-white">取消预约</text></button> -->
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
		<!-- </uni-section> -->
	</view>


</template>

<script>
	import {
		listAppointment,
		delAppointment,
		getAppointment,
		updateAppointment
	} from '@/api/module/shao/appointment.js'

	export default {
		data() {
			return {
				total: 0,
				searchVal: '',
				tableData: [],
				equipType: {},
				equipOptions: [],
				loading: false,
				msgType: 'success',
				messageText: '这是一条成功提示',
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				// 每页数据量
				pageSize: 4,
				// 当前页
				pageCurrent: 1,
				indicatorColor: "#292b40",
				indicatorActiveColor: "#ffffff",
				//面包屑
				// routes: [
				//          {
				//            to: "/pages/module/lyq/index",
				//            name: "首页",
				//          },
				//          {
				//            to: "",
				//            name: "菜单 A",
				//          },
				//          {
				//            to: "",
				//            name: "菜单 B",
				//          },
				//        ],

				form: {},
				showRight: false,
				showLeft: false,
				queryParams: {
					pageNum: 1,
					pageSize: 4,
					studentId: null,
					department: null,
					name: null,
					gender: null,
					phone: null,
					idCard: null,
					teacherName: null,
					teacherId: null,
					equipmentType: null,
					applicationDepartment: null,
					instrumentId: null,
					instrumentName: null,
					modelNumber: null,
					specification: null,
					unitPrice: null,
					classifyNumber: null,
					purchaseDate: null,
					receiver: null,
					manufacturers: null,
					storageDate: null,
					storageLocation: null,
					expenditureSubject: null,
					useDirection: null,
					firstUse: null,
					appointmentStart: null,
					appointmentEnd: null,
					sbumitTime: null,
					auditStatus: null,
					teacherResult: null,
					adminResult: null,
					teacherTime: null,
					adminTime: null,
					userId: null,
					deptId: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					receiverName: null,
					receiverId: null,
					remark: null,
					note1: null,
					note2: null,
					note3: null,
					note4: null,
					note5: null,
					note6: null,
					note7: null,
					note8: null,
					note9: null,
					note10: null
				},
			}
		},
		// 生成时
		created() {
			this.getList();
			this.getDicts("yh_equip_type").then(response => {
				this.equipOptions = response.data;
				// console.log(this.equipOptions)
				for (var i = 0; i < this.equipOptions.length; i++) {
					this.equipType[this.equipOptions[i].dictValue]=this.equipOptions[i].dictLabel
				}
			});
		},

		onLoad() {
			this.selectedIndexs = []
			// this.getData(1)
			this.getList()

		},
		onBackPress(options) {
			let self = this;
			if (options.from === 'navigateBack') {
				return false;
			}
			console.log("要指定返回的页面");
			uni.switchTab({
				url: '/pages/work/index'
			})
			return true;
		},

		methods: {
			// 显示转换
			type: function(equipType) {
				// for (var i = 0; i < this.equipOptions.length; i++) {
				// 	if (equipType === this.equipOptions[i].dictValue) {
				// 		return this.equipOptions[i].dictLabel
				// 	}
				// }
				return this.equipType[equipType]
			},


			review(ids) {
				const id = ids
				console.log(ids)
				if (id) {
					// 获取表详细信息

					getAppointment(id).then(res => {

						this.form = res.data;
						console.log(this.form)
					});
					this.$tab.navigateTo('/pages/module/shao/shao_detail?id=' + ids)
				}
				// this.$tab.navigateTo('/pages/module/shao/xiangxi?id='+ids)
			},
			indexMethod(index) {
				/* console.log((this.pageCurrent-1)*this.pageSize+index+1) */
				return (this.pageCurrent - 1) * this.pageSize + index + 1
			},

			//获取数据
			getList() {
				this.loading = true;
				listAppointment(this.queryParams).then(res => {
					this.tableData = res.rows;
					this.total = res.total;
					this.loading = false;
				});
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},

			// submit(flag) {
			// 	/* this.form.auditStatus = flag; */
			// 	this.form.note1 = flag;
			// 	this.form.auditStatus = 3;
			// 	updateAppointment(this.form).then(response => {
			// 		// this.$modal.msgSuccess("预约取消成功");
			// 		this.open = false;
			// 		this.getList();
			// 	});

			// },
			// }
			// /** 删除按钮操作 */
			// handleDelete(refs) {

			// 	this.$modal.confirm('是否取消该数据项？').then(function() {
			// 		this.$refs.form.validate().then(res => {
			// 		  updateAppointment(this.from.note1=1).then(response => {
			// 		    this.$modal.msgSuccess("取消成功")
			// 	})
			// 	})
			// 	});
			// },
			// dialogConfirm() {
			// 	// 	console.log('点击确认')
			// 	this.messageText = `删除成功`
			// 	this.$refs.message.open()
			// },
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			//弹出框
			// dialogToggle(type) {
			// 	this.msgType = type
			// 	this.$refs.alertDialog.open()
			// },

			// dialogClose() {
			// 	console.log('点击关闭')
			// },

			// 分页触发
			change1(e) {
				// this.$refs.table.clearSelection()
				// this.selectedIndexs.length = 0
				// console.log(e)
				this.queryParams.pageNum = e.current
				this.getList(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// goDetail() {
			// 	uni.navigateTo({
			// 		url: '../shao/shao_detail'
			// 	});
			// },
			//弹出框
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},

			dialogClose() {
				console.log('点击关闭')
			},
			dialogConfirm() {
				this.form.note1 = 1;
				
				updateAppointment(this.form).then(response => {
					// this.$modal.msgSuccess("预约取消成功");
					this.open = false;
					this.getList();
				});
				// 	console.log('点击确认')
				this.messageText = `预约取消成功`
				this.$refs.message.open()
				setTimeout(function() {
					uni.navigateTo({
						url: `/pages/module/shao/xiangxi`
					})
				}, 700);



			},

			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		// onBackPress() {
		// 	if (this.showRight || this.showLeft) {
		// 		this.$refs.showLeft.close()
		// 		this.$refs.showRight.close()
		// 		return true
		// 	}
		// }
	}
</script>



<style lang="scss">
	.example-body {
		padding: 10px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 30rpx;
		right: 20rpx;
		bottom: 30rpx;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 20px;
	}

	.close {
		padding: 50px;
		text-align: right;


	}


	.msg-tag.spam {
		background: #55aaff;
	}

	.msg-tag.span {
		background: #006400;
	}

	.msg-tag.spab {
		background: #ff0000;
	}

	.msg-tag.spak {
		background: #ffaa7f;
	}

	.msg-tag.spal {
		background: #5555ff;
	}

	.msg-tag {
		position: relative;
		color: #ffffff;
		text-transform: uppercase;
		padding: 3px 10px;
		font-size: 10px;
		background: #f9f9f9;
		border-radius: 50px;
	}

	.an-user-lists .list-user-single .list-date {
		text-align: center;
		margin-top: 5px;
	}

	.an-user-lists .list-user-single .list-date {
		color: #999;
		font-size: 13px;
	}

	.kk {
		font-size: 16px;
		text-align: center;
	}

	.vv {
		font-weight: normal;
		margin: 10px;
		font-size: 15px;
	}

	.qq {
		font-size: 16px;
		text-align: center;
	}

	.ww {
		font-size: 16px;
		text-align: center;
	}

	.pp {
		font-size: 16px;
		text-align: center;
	}

	.oo {
		font-size: 20px;
		text-align: center;
	}

	.interval {
		margin-bottom: 10px;
	}

	.uni-common-mt {
		background-color: #fff;
		// margin-top: 30px;
	}

	.content {
		
		text-align: center;
		font-weight: bold;
	}

	.card-text {
		font-weight: normal;
		color: #000000;


	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.check-mark {
		display: block;
		text-align: left;
	}

	.interval {
		margin-bottom: 10px;
	}

	.a-i-c {
		text-align: left;
	
	}

	.ins {

		float: right;
	}

	.uni-badge-left-margin {
		margin-left: 10px;
		size: normal;
		text-align: left;
	}

.inx {
  
   font-weight: normal;
   color: #000000;
  }
 
	.card-text-name{
			font-weight: normal;
			margin-right: 5%;
			color: #000000;
		}

	.title-split {
		margin: 10rpx 0 2rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			color: #550000;
			font-weight: 1000;
			font-size: 40rpx;
			padding: 0 30rpx;
		}

		view {
			width: 98rpx;
			height: 4rpx;
			border-radius: 3rpx;

			&:first-of-type {
				background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%);
			}

			&:last-of-type {
				background: linear-gradient(90deg, #333333 0%, rgba(98, 98, 98, 0) 100%);
			}
		}
	}
</style>
